{extend name="layouts/main-layui-vue-index" /}
{block name="title"}{__block__}{/block}
{block name="header"}{/block}
{block name="beforeDiv"}{/block}
{block name="app"}
<div class="login-wrap">
    <div class="login-root">
        <div class="login-main">
            <div class="login-container">
                <div class="login-side">
                    <div class="login-bg-title">
                        <h1>layui vue admin</h1>

                        <h3 style="margin: 20px auto">
                            开 箱 即 用 的 layui vue 企 业 级 前 端 模 板
                        </h3>
                    </div>
                </div>
                <div class="login-ID">
                    <div style="font-size: 22px; margin-bottom: 15px; margin-top: 5px">
                        🎯 Sign in
                    </div>
                    <lay-tab type="brief" v-model="method">
                        <lay-tab-item title="用户名" id="1">
                            <lay-form :model="loginForm" ref="model_loginForm"
                                      :initValidate="false">
                                <div style="height: 250px">
                                    <lay-form-item :label-width="0">
                                        <lay-input :allow-clear="true" prefix-icon="layui-icon-username"
                                                   placeholder="用户名" required
                                                   v-model="loginForm.username"></lay-input>
                                    </lay-form-item>
                                    <lay-form-item :label-width="0">
                                        <lay-input :allow-clear="true" prefix-icon="layui-icon-password"
                                                   placeholder="密码" password required
                                                   type="password" v-model="loginForm.password"></lay-input>
                                    </lay-form-item>
                                    <lay-form-item :label-width="0">
                                        <div style="width: 264px; display: inline-block">
                                            <lay-input :allow-clear="true" prefix-icon="layui-icon-vercode"
                                                       placeholder="验证码" required
                                                       v-model="loginForm.captcha"></lay-input>
                                        </div>

                                        <div class="login-captach" @click="toRefreshImg">
                                            <img style="width: 100%;height:100%" :src="loginYzm"
                                                 alt="获取验证码"/>
                                        </div>
                                    </lay-form-item>
                                    <lay-checkbox value="" name="like" v-model="remember" skin="primary" label="1">
                                        记住密码
                                    </lay-checkbox>
                                    <lay-form-item :label-width="0">
                                        <lay-button style="margin-top: 20px" type="primary" :loading="loging"
                                                    :fluid="true"
                                                    loadingIcon="layui-icon-loading" @click="loginSubmit">登录
                                        </lay-button>
                                    </lay-form-item>
                                </div>
                            </lay-form>
                        </lay-tab-item>
                        <lay-tab-item title="二维码" id="2" v-if="OtherloginType">
                            <div style="width: 200px; height: 250px; margin: 0 auto">
                                <lay-qrcode text="http://www.layui-vue.com" :width="200" color="#000"
                                            style="margin: 10px 0 20px"></lay-qrcode>
                                <div style="text-align: center; cursor: pointer" @click="toRefreshQrcode">
                                    <lay-icon type="layui-icon-refresh-three"></lay-icon>
                                    刷新二维码
                                </div>
                            </div>
                        </lay-tab-item>
                    </lay-tab>
                    <lay-line v-if="OtherloginType ">Other login methods</lay-line>
                    <ul class="other-ways" v-if="OtherloginType">
                        <li>
                            <div class="line-container">
                                <img class="icon" src="/plugin/admin/public/assets/login/w.svg"/>
                                <p class="text">微信</p>
                            </div>
                        </li>
                        <li>
                            <div class="line-container">
                                <img class="icon" src="/plugin/admin/public/assets/login/q.svg"/>
                                <p class="text">钉钉</p>
                            </div>
                        </li>
                        <li>
                            <div class="line-container">
                                <img class="icon" src="/plugin/admin/public/assets/login/a.svg"/>
                                <p class="text">Gitee</p>
                            </div>
                        </li>
                        <li>
                            <div class="line-container">
                                <img class="icon" src="/plugin/admin/public/assets/login/f.svg"/>
                                <p class="text">Github</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="afterDiv"}{/block}


{block name="constApp"}
<script>
    const App = {
        data() {
            return {
                vue_data: {},
                method: ref('1'),
                loginForm: reactive({
                    username: '',
                    password: '',
                    captcha: ''
                }),
                remember: ref(false),
                loging: ref(false),
                loginYzm: "/plugin/admin/public/assets/login/login-yzm.jpg",
                OtherloginType: false
            }
        },

        methods: {
            async loginSubmit() {
                var This = this;
                this.$refs.model_loginForm.validate(async (isValidate, model, errors) => {
                    console.log(This.loginForm)
                    if (isValidate) {
                        const res = await post('/app/admin/account/login', This.loginForm, false)
                        if (res.code === 0) {
                            layer.msg(res.msg, {time: 1000, icon: 1});
                            window.location.href = "/app/admin/index/index";
                        } else if (res.code >= 1) {
                            layer.msg(res.msg, {icon: 2, time: 3000})
                            if (res.code === 2) await this.toRefreshImg();
                        }
                    } else {
                        console.log(model)
                        console.log(errors)
                    }
                });
            },
            toRefreshQrcode() {

            },
            async toRefreshImg() {
                let timestamp = Date.now();
                this.loginYzm = '/app/admin/account/captcha/login?v=' + timestamp
                setTimeout(async () => {
                    const res = await get('/app/admin/account/getcaptcha', false)
                    // this.loginForm.captcha = res.data.captcha//注释这句话就不会自动填写验证码了
                }, 500);
            }
        },
        mounted: function () {
            this.toRefreshImg()
        }
    };
    setTimeout(() => {
        const app = Vue.createApp(App);
        app.use(LayuiVue);
        app.mount("#app");
    }, 1);

</script>
<style>
    .login-captach {
        display: inline-block;
        vertical-align: bottom;
        width: 108px;
        height: 40px;
        color: var(--global-primary-color);
        margin-left: 8px;
        border-radius: 4px;
        border: 1px solid hsla(0, 0%, 60%, 0.46);
        transition: border 0.2s;
        box-sizing: border-box;
        background: #fff;
        overflow: hidden;
        cursor: pointer;
    }

    .login-one-ball {
        opacity: 0.4;
        position: absolute;
        max-width: 568px;
        left: -400px;
        bottom: 0;
    }

    .login-two-ball {
        opacity: 0.4;
        position: absolute;
        max-width: 320px;
        right: -200px;
        top: -60px;
    }

    .login-wrap {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: auto;
        min-width: 600px;
        z-index: 9;
        background-image: url("/plugin/admin/public/assets/login/background.svg");
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 100vh;
    }

    .login-wrap .layui-input-block {
        margin-left: 0 !important;
    }

    .login-root {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        width: 100%;
        min-width: 320px;
        background-color: initial;
    }

    .login-main {
        position: relative;
        display: block;
    }

    .logo-container {
        max-width: calc(100vw - 28px);
        margin-bottom: 40px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-container .logo {
        display: inline-block;
        height: 30px;
        width: 143px;
        background-size: contain;
        cursor: pointer;
    }

    .login-container {
        position: relative;
        overflow: hidden;
        width: 940px;
        height: 520px;
        max-width: calc(100vw - 28px);
        border-radius: 4px;
        background: hsla(0, 0%, 100%, 0.5);
        backdrop-filter: blur(30px);
        display: flex;
        box-shadow: 6px 6px 12px 4px rgba(0, 0, 0, 0.1);
    }

    .login-side {
        padding: 40px 20px 20px;
        background-color: var(--global-primary-color);
        flex: 1;
        height: 100%;
    }

    .login-bg-title {
        flex: 1;
        height: 84%;
        color: #fff;
        text-align: center;
        background-image: url('/plugin/admin/public/assets/login/login-bg.svg');
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: contain;
        min-width: 200px;
    }

    .login-ID {
        padding: 20px;
        width: 380px;
        min-width: 380px;
    }

    .login-container .layui-tab-head {
        background: transparent;
    }

    .login-container .layui-input-wrapper {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .login-container .layui-input-wrapper {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .login-container .assist {
        margin-top: 5px;
        margin-bottom: 5px;
        letter-spacing: 2px;
    }

    .login-container .layui-btn {
        margin: 10px 0 10px 0;
        letter-spacing: 2px;
        height: 40px;
    }

    .login-container .layui-line-horizontal {
        letter-spacing: 2px;
        margin-bottom: 34px !important;
        margin-top: 24px !important;
    }

    .other-ways {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 14px;
        font-weight: 400;
    }

    .other-ways li {
        width: 100%;
    }

    .line-container {
        justify-content: center;
        align-items: center;
        text-align: center;
        cursor: pointer;
    }

    .line-container .icon {
        height: 28px;
        width: 28px;
        margin-right: 0;
        vertical-align: middle;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px 0 rgb(9 30 66 / 4%), 0 1px 4px 0 rgb(9 30 66 / 10%),
        0 0 1px 0 rgb(9 30 66 / 10%);
    }

    .line-container .text {
        display: block;
        margin: 12px 0 0;
        font-size: 12px;
        color: #8592a6;
    }

    .layui-tab-title .layui-this {
        background-color: transparent;
    }
</style>{/block}
{block name="plugins"}{/block}
{block name="mountApp"}{/block}